<style lang="less">
@import "./home.less";
</style>

<template>
  <div>
    <div v-show="currNav == 'xboot'" class="home">
      <Row :gutter="10">
        <!-- 左上侧 用户信息及github链接 -->
        <Col :sm="24" :lg="24" :xl="8">
          <Row :gutter="10">
            <Col style="margin-bottom: 10px; width: 100%">
              <Card :padding="0">
                <div class="welcome-card">
                  <div class="left">
                    <div class="user">
                      <Avatar
                        v-if="avatar"
                        :src="avatar"
                        size="60"
                        class="avator-img"
                      ></Avatar>
                      <Avatar
                        v-else
                        icon="md-person"
                        size="60"
                        class="avator-icon"
                      ></Avatar>
                      <div class="info">
                        <p class="username">Hi, {{ nickname }} !</p>
                      </div>
                    </div>
                    <div class="list">
                      <div class="p">
                        <div class="dot"></div>
                        您当前所在的部门为：{{ departmentTitle }}
                      </div>
                      <div class="p">
                        <div class="dot"></div>
                        您当前的用户类型为：{{ userType }}
                      </div>
                      <div class="p">
                        <div class="dot"></div>
                        本次登录地点：{{ city }}
                      </div>
                    </div>
                  </div>
                  <img
                    class="pic"
                    :src="require('@/assets/icon/computer.svg')"
                  />
                </div>
              </Card>
            </Col>
            <Col style="margin-bottom: 10px; width: 100%">
              <Card>

              </Card>
            </Col>
          </Row>
        </Col>
        <!-- 右上侧 -->
        <Col :lg="24" :xl="16">
          <Row :gutter="10">
            <Col :sm="24" :lg="24" :xl="12" style="margin-bottom: 10px">
              <Card>

              </Card>
            </Col>
            <Col :sm="24" :lg="24" :xl="12" style="margin-bottom: 10px">
              <Card>
              </Card>
            </Col>
          </Row>
        </Col>
      </Row>
      <Row :gutter="10">
        <Col :sm="24" :md="12" :lg="6" :style="{ marginBottom: '10px' }">
          <card1
            id-name="card1"
            prefix="￥"
            :end-val="count.data1"
            description="今日销售额"
            :image="require('@/assets/icon/money.png')"
            width="34px"
            height="34px"
          />
        </Col>
        <Col :sm="24" :md="12" :lg="6" :style="{ marginBottom: '10px' }">
          <card2
            id-name="card2"
            suffix="%"
            :end-val="count.data2"
            color="#f90"
            title="销售量增长"
            description="相比昨日"
          />
        </Col>
        <Col :sm="24" :md="12" :lg="6" :style="{ marginBottom: '10px' }">
          <card4
            title="待办事项"
            :time="time"
            description="您有一个新的待审批任务，请前往查看"
          />
        </Col>
        <Col :sm="24" :md="12" :lg="6" :style="{ marginBottom: '10px' }">
          <card3
            id-name="card3"
            title="应用中心"
            description="销量统计，用户统计，日活分析"
            :image="require('@/assets/icon/app.png')"
            width="34px"
            height="34px"
            titleSize="18px"
          />
        </Col>
      </Row>
      <Row :gutter="10">
        <Col :sm="24" :md="12" :lg="4" :style="{ marginBottom: '10px' }">
          <cardApp icon="logo-buffer" title="SaaS应用" />
        </Col>
        <Col :sm="24" :md="12" :lg="4" :style="{ marginBottom: '10px' }">
          <cardApp activeColor="#2db7f5" icon="md-bookmarks" title="日志分析" />
        </Col>
        <Col :sm="24" :md="12" :lg="4" :style="{ marginBottom: '10px' }">
          <cardApp activeColor="#19be6b" icon="md-cloud" title="云运维" />
        </Col>
        <Col :sm="24" :md="12" :lg="4" :style="{ marginBottom: '10px' }">
          <cardApp activeColor="#f90" icon="md-film" title="视频监控" />
        </Col>
        <Col :sm="24" :md="12" :lg="4" :style="{ marginBottom: '10px' }">
          <cardApp activeColor="#8950fc" icon="md-stats" title="数据分析"
        /></Col>
        <Col :sm="24" :md="12" :lg="4" :style="{ marginBottom: '10px' }">
          <cardApp activeColor="#ed4014" icon="md-people" title="用户分析"
        /></Col>
      </Row>
      <Row :gutter="10">
        <Col :sm="24" :md="12" :lg="6" :style="{ marginBottom: '10px' }">
          <card1
            id-name="card5"
            :bordered="false"
            :end-val="126778"
            description="今日新增互动数"
            backgroundColor="#fff4df"
            :image="require('@/assets/icon/comment.png')"
            width="34px"
            height="34px"
          />
        </Col>
        <Col :sm="24" :md="12" :lg="6" :style="{ marginBottom: '10px' }">
          <card1
            id-name="card6"
            :bordered="false"
            :end-val="68893"
            backgroundColor="#6993fe"
            titleColor="#fff"
            icon="md-person-add"
            iconColor="#fff"
            descriptionColor="#fff"
            description="今日新增用户"
          />
        </Col>
        <Col :sm="24" :md="12" :lg="6" :style="{ marginBottom: '10px' }">
          <card1
            id-name="card7"
            :bordered="false"
            :end-val="count.data4"
            backgroundColor="#8950fe"
            titleColor="#fff"
            icon="md-cloud-download"
            iconColor="#fff"
            descriptionColor="#fff"
            description="今日下载量"
          />
        </Col>
        <Col :sm="24" :md="12" :lg="6" :style="{ marginBottom: '10px' }">
          <card1
            id-name="card8"
            :bordered="false"
            :end-val="13507632434"
            backgroundColor="#f64e61"
            titleColor="#fff"
            icon="md-calendar"
            iconColor="#fff"
            descriptionColor="#fff"
            description="月活"
          />
        </Col>
      </Row>
      <Row :gutter="10">
        <Col :sm="24" :lg="24" :xl="16" :style="{ marginBottom: '10px' }">
          <visit-volume />
        </Col>
        <Col :sm="24" :lg="24" :xl="8" :style="{ marginBottom: '10px' }">
          <visit-separation />
        </Col>
      </Row>
    </div>
    <div v-if="currNav == 'app'">
      <dashboard2 />
    </div>

    <Modal
      v-model="showVideo"
      title="作者亲自制作XBoot炫酷文字快闪宣传片"
      :styles="{ top: '30px' }"
      footer-hide
      width="1000"
    >
      <iframe
        src="//player.bilibili.com/player.html?aid=30284667&cid=52827707&page=1"
        scrolling="no"
        border="0"
        frameborder="no"
        framespacing="0"
        allowfullscreen="true"
        style="width: 100%; height: 550px"
      ></iframe>
    </Modal>
  </div>
</template>

<script>
import { ipInfo, getNotice } from "@/api/index";
import visitVolume from "./components/visitVolume.vue";
import visitSeparation from "./components/visitSeparation.vue";
import card1 from "./components/card1.vue";
import card2 from "./components/card2.vue";
import card3 from "./components/card3.vue";
import card4 from "./components/card4.vue";
import cardApp from "./components/cardApp.vue";
import dashboard2 from "../xboot-charts/dashboard2/dashboard2.vue";
import Cookies from "js-cookie";
import "gitalk/dist/gitalk.css";
import Gitalk from "gitalk";

export default {
  name: "home",
  components: {
    visitVolume,
    visitSeparation,
    card1,
    card2,
    card3,
    card4,
    cardApp,
    dashboard2,
  },
  data() {
    return {
      showVideo: false,
      count: {
        data1: 5396,
        data2: 68,
        data3: 19305,
        data4: 39503498,
      },
      city: "未知",
      departmentTitle: "无",
      userType: "无",
      time: "",
    };
  },
  computed: {
    currNav() {
      return this.$store.state.app.currNav;
    },
    nickname() {
      return this.$store.state.user.nickname;
    },
    avatar() {
      return this.$store.state.user.avatar;
    },
  },
  methods: {
    init() {
      let userInfo = JSON.parse(Cookies.get("userInfo"));
      this.departmentTitle = userInfo.departmentTitle;
      if (userInfo.type == "0") {
        this.userType = "普通用户";
      } else if (userInfo.type == "1") {
        this.userType = "管理员";
      }
      ipInfo().then((res) => {
        if (res.success) {
          this.city = res.result;
        }
      });
      this.time = this.format(new Date(), "yyyy年MM月dd日");
    },
    showNotice() {
      getNotice().then((res) => {
        if (res.success) {
          if (!res.result) {
            return;
          }
          let data = res.result;
          if (
            data.open &&
            (data.title || data.content) &&
            data.position == "HOME"
          ) {
            this.$Notice.info({
              title: data.title,
              desc: data.content,
              duration: data.duration,
            });
          }
        }
      });
    },
  },
  mounted() {
    this.init();
    // 通知
    let noticeFlag = "noticeShowed";
    let notice = Cookies.get(noticeFlag);
    if (notice != noticeFlag) {
      this.showNotice();
      Cookies.set(noticeFlag, noticeFlag);
    }
  },
};
</script>
